<div class="sim-detail-hook">
    <div class="title">
        当前位置：运营管理&nbsp;->&nbsp;SIM卡管理&nbsp;->&nbsp;<span class="active">详情</span>
    </div>
    <div class="detail-header fr" >
        <h3 class="choice">详情</h3>
        <a class="primary_btn" @click.stop="goBack()">返回</a>
    </div>
    <div class="inner-wrapper">
        <div class="form">
            <form class="form-horizontal create-form-hook" method="post">
                <div class="row odd" style="border-radius: 5px">
                    <div class="col-sm-4">
                        <label class="control-label">IMSI号</label>
                        <p class="form-control-static" v-text="account.imsiCode"></p>
                    </div>
                    <div class="col-sm-4">
                        <label class="control-label">卡号</label>
                        <p class="form-control-static" v-text="account.imsiCard"></p>
                    </div>
                    <div class="col-sm-4">
                        <button class="primary_btn" @click.stop="updateData">更新数据</button>
                    </div>
                </div>
                <div class="row dual">
                    <div class="col-sm-4">
                        <label class="control-label">套餐</label>
                        <p class="form-control-static" v-text="account.imsiPackage"></p>
                    </div>
                    <div class="col-sm-4">
                        <label class="control-label">已使用流量</label>
                        <p class="form-control-static" v-text="account.usedFlow"></p>
                    </div>
                </div>
                <div class="row odd">
                    <div class="col-sm-4">
                        <label class="control-label">开卡时间</label>
                        <p  class="form-control-static" v-text="account.activateDate"></p>
                    </div>
                    <div class="col-sm-4">
                        <label class="control-label">计费周期(月)</label>
                        <p class="form-control-static" v-text="account.cycle"></p>
                    </div>
                </div>
                <div class="row dual">
                    <div class="col-sm-4">
                        <label class="control-label">套餐生效日期</label>
                        <p class="form-control-static" v-text="account.effectiveDate"></p>
                    </div>
                    <div class="col-sm-6">
                        <label class="control-label">套餐失效日期</label>
                        <p class="form-control-static" v-text="account.loseDate"></p>
                    </div>
                </div>
                <div class="row">
                    <div class="custom-table-wrapper">
                        <demo-grid :data="account.list" :columns="account.listColumns" :total="account.flows">
                        </demo-grid>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<!--vue表格生成模板-->
<script type="text/x-template" id="grid-template">
    <table class="table table-bordered">
        <thead>
        <tr>
            <th class="form-center">年 -- 月</th>
            <th class="form-center">流量（M）</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="entry in data">
            <td class="form-center" v-for="key in columns">{{entry[key]}}</td>
        </tr>
        <tr>
            <td class="form-center">合计</td>
            <td class="form-center" v-text="total||0" style="color: red;"></td>
        </tr>
        </tbody>
    </table>
</script>
<script type="text/javascript" src="js/back/operate/sim/sim-detail.js" custom></script>